<template>
	<view class="login-container">
		<!-- 提示登录的图标 -->
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<!-- 登陆选项 ,为登录的button按钮绑定open-type="getUserInfo"属性,表示点击按钮时,希望获取用户的基本信息-->
		<!-- 可以从getuserinfo事件处理函数的形参中,获取到用户的基本信息 -->
		<button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>
		<text class="tips-text">登陆后尽享更多权益</text>
	</view>
</template>
<script>
	import {mapGetters,mapMutations,mapState} from 'vuex'
	export default {
		data(){
			return{
				
			}
		},
		computed:{
			...mapState('m_user',['redirectInfo'])
		},
		methods:{
			...mapMutations('m_user',['updateUserInfo','updateRedirectInfo']),
			//获取用户的基本信息
			// getUserInfo(e){
			// 	console.log(e)
				
			// 	if(e.detail.errMsg==='getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
			// 	//e.detail.userInfo就是用户的基本信息
			// 	console.log(e.detail.userInfo)
			// 	//将用户的信息存储到vuex中
			// 	this.updateUserInfo(e.detail.userInfo) 
				
			// 	//获取登录成功之后的token字符串(e.detail包含了获取Token所需其中四个字符串,除了code)
			// 	// this.getToken(e.detail) 
			// },
			 getUserProfile(){
				 uni.getUserInfo({
					desc:'请求授权',
					success:(res)=>{
						this.updateUserInfo(res.userInfo)
						
						//登陆成功之后，重新导航到对应的页面
						this.navigateBack()
						console.log(res)
					},fail:(res)=>{
						return uni.$showMsg('您取消了登录授权')
					}
				}) 
			},
			navigateBack(){
				//redirectInfo不为null，并且导航方式为switchTab
				if(this.redirectInfo && this.redirectInfo.openType==='switchTab'){
					uni.switchTab({
						url:this.redirectInfo.from,
						//导航完成之后，把vuex中的redirectInfo对象重置为null
						complete: () => {
							this.updateRedirectInfo(null)
						}
					})
				}
			},
			
			async getToken(info){
				//调用微信登录login接口获取到code
				const [err,res]=await uni.login().catch(err=>err)
				//判断是否wx.login()调用失败
				if(err || res.errMsg!=='login:ok') return uni.$showMsg('登录失败!')
				
				//准备参数对象
				const query={
					code:res.code,
					encryptedData:info.encryptedData,
					iv:info.iv,
					rawData:info.rawData,
					signature:info.signature
				}
				
				//换取token
				const {data:loginResult} =await uni.$http.post('/api/public/v1/users/wxlogin',query)
				if(loginResult.meta.status!==200) return uni.$showMsg('登陆失败!')
				uni.$showMsg('登录成功!')  
			}
		}
	}
</script>
<style lang="scss">
	.login-container{
		height: 750rpx;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		
		&::after{//伪元素,在盒子内容后面出现
			content:' ';
			display: block;//扩容化
			width: 100%;
			height: 40px;
			background-color: white;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 100%;
			transform:translateY(50%);//向下移动自身高度的50%
		}
		.btn-login{
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #C00000;
		}
		.tips-text{
			font-size: 12px;
			color: gray;
		}
	}
</style>
